/** 
六合一数据接口管理
@author: wangjia
@date: 20181213
@description: 和后台交互，完成“六合一接口”IP和端口配置。存在get和post两种接口，分别表示读和写。
     
@params： 1.六合一接口IP ipaddr  2. 六合一接口端口号  port
@api:  1. [get] /getinterfaceserverdata.shtml   return {code:200,data:{ip:10.11.12.13, port:2345}} 
@debug： using mock

*/

<template>
    <div class="sys-page">
        <app-title :title="dialogTitle"  style="display:inline;"></app-title>
<el-button type="success" @click="refresh()" round style="float:right; margin-top:10px;" icon="el-icon-refresh">刷新</el-button>
            <el-table v-loading="loading" border :data="tableData" :row-class-name="tableRowClassName">
                <el-table-column prop="ipaddr" label="接口ip地址" align="center"></el-table-column>
                <el-table-column prop="port" label="接口端口号" align="center"></el-table-column>
                <el-table-column label="操作" align="center">

                    <template slot-scope="scope">
                        <el-button type="text" size="medium" @click="edit(scope.row)">设置</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog :title="dialogTitle" :visible.sync="editTableShow" width='40%' :fullscreen='false'>
                <el-form  :rules="validateRules">
                    <el-row>
                        <el-col :span="12">
                    <el-form-item prop="ipaddr" label="六合一接口IP:" :label-width="formLabelWidth">
                        <el-input v-model="ipaddr" ref="selectValue" @focus="ipfocus" size="small"></el-input>
                    </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                    <el-form-item prop="port" label="六合一接口Port:" :label-width="formLabelWidth">
                        <el-input v-model="port" ref="selectValue" @focus="ipfocus" size="small"></el-input>
                    </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-button @click.native.prevent="ok" :disabled="okEnable">确定</el-button>
                <el-button @click.native.prevent="cancel">取消</el-button>
            </el-dialog>
    </div>

</template>
<style>
  .el-table .warning-row {
    background: #F08080;
  }

  .el-table .success-row {
    background:#f0f9eb;
  }
</style>
<script>
export default {
    name:'userterminalband',
    data(){
        var validateIp = (rule, value, callback) => {

            this.HTTP.methods.apiGet("/ajax/ip/check.shtml?ip="+this.selectValue).then(res =>
            {
                if(res.code != 200){
                    this.okEnable = true;
                callback(new Error(res.msg))
            }else{
                    this.okEnable = false;
                callback()
            }
        })

        }
        return {

            validateRules:{
                selectValue:[{ validator: validateIp,  trigger: 'blur', required: true, message:"IP输入非法"}]
            },
            dialogTitle:"六合一接口服务器地址管理",
            failcnt:1,
            lastIp: "",
            lastRow: {},
            loading: false,
            editTableShow: false,
            selectUserName:"",
            formLabelWidth: "100px",
            okEnable: true,
            tableData:[],
            errorMsg:"您的信息有误，请联系管理员修改",
            issafe:true,
            ipaddr:'',
            port:''

       }
    },
    mounted(){
        this.query()
    },
    methods:{
        refresh(){
            this.query()
        },
        ipfocus:function () {
          this.okEnable = true;
        },
        tableRowClassName({row, rowIndex}) {
          if(this.issafe === false){
            return 'warning-row';
          }else{
              return 'success-row'
          }
        },
        edit(row){
            this.lastRow = row;
            this.selectUserName = row.userName;
            this.selectValue = row.ipEffective
           this.editTableShow = true
        },
        ok(){
            this.editTableShow = false
            this.lastIp = this.selectVal

            this.HTTP.methods.apiPost("/user/userterminalcfg.shtml",{userName:this.selectUserName,
                ipEffective:this.selectValue }).then(res =>
                {
                   if (res.code != 200) {
                        this.$message(res.msg);
                    } else {
                        for(var i=0; i<this.tableData.length; i++) {
                            if (this.tableData[i].userName == this.selectUserName) {
                                this.tableData[i].ipEffective = res.ip;
                                console.log(res.ip)
                            }
                        }
                        this.$message("IP绑定成功");
                    }

                })
        },
        cancel(){
            this.editTableShow = false
            this.failcnt = 1
            this.selectVal = 1

        },
        //缺少一种点进去链接，就发请求的listener
        query(){
            this.HTTP.methods.apiGet("/getinterfaceserverdata").then(res =>
            {
                console.log(res)
                if(res.code == 200){
                this.tableData = res.data;

            }else{
                this.tableData = []
            }
        })
        }
    }
}
</script>


